<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="/grsun" prefix="grsun"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<meta name="description" content="Mailbox with some customizations as described in docs" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<%@ include file="/include/main_include.jsp"%>
<link type='text/css' rel='stylesheet' href='${path}/static/myjs/information/diningStyle/css/iconfont.css' />
<script type="text/javascript" src="${path}/static/myjs/plugins/grsunChooseWindow.js"></script>
<style>
        div.all{
            width:700px;
            margin:0 auto;
            padding:20px 20px 0 20px;
        }
        div>ul{
            list-style: none;
            width:700px;
            margin:0;
            padding:0;
        }
        div>ul>li{
            width:160px;
            height:293px;
            border:1px solid #959595;
            float:left;
            margin-bottom:20px;
            margin-right:17px;
            position:relative;
        }
        div>ul>li:nth-child(4n){
            margin-right:0;
        }
        div>ul>li>a{
            display:block;
            width:120px;
            height:180px;
            margin:18px 18px 10px 18px;
        }
        div>ul>li>a>img{
            width:120px;
            vertical-align: bottom;
        }
        div>ul>li>p{
            font-size:12px;
            width:120px;
            height:55px;
            margin:0 18px;
            padding:0;
        }
        li>span{
            display:block;
            width:30px;
            height:30px;
            border-radius:50%;
            background:grey;
            text-align: center;
            margin:0 auto;
        }
        li.active>span{
            background:green;
        }
        li>span>i{
            color:#fff;
            font-size: 22px;
            line-height:30px;
        }
    </style>
</head>
<body>
	 <div class="all">
	 <form id="dataForm" class="form-horizontal" method="post"  action="${path }/hhDiningStyle/editStyle.do"> 
	 <input type="hidden" name="businessId" value="${pd.businessId}">
	 <input id="DINNING_BACK" type="hidden" name="diningBack" value="${pd.diningBack}">
	    </form>
        <ul>
            <li id="" <c:if test="${pd.diningBack.equals('') }">class="active"</c:if> >
                <a ><img src="${path}/static/images/ChinaMobile.png"  onclick="showPic(this);"/></a>
                <p>${row.name }</p>
                <span><i class="icon iconfont icon-duihao"></i></span>
            </li>
        <c:forEach items="${pd.rows }"  var="row">
            <li id="${row.diningStyleId }" <c:if test="${row.diningStyleId.equals(pd.diningBack) }">class="active"</c:if> >
                <a ><img src="${path}/static/images/${row.url}" alt="${row.name }" onclick="showPic(this);"/></a>
                <p>${row.name }</p>
                <span><i class="icon iconfont icon-duihao"></i></span>
            </li>
             </c:forEach>
            <div style="clear:both;"></div>
        </ul>
     
    </div>
	 
	<script type="text/javascript">
	function showPic(photo) {
		var img = $(photo);
		var photos = {
			"title" : "", //相册标题
			"start" : 0, //初始显示的图片序号，默认0
			"data" : [ //相册包含的图片，数组格式
			{
				"alt" : "图片",
				//原图地址
				"src" : $(photo)[0].src

			} ]
		};
		layer.photos({
			photos : photos,
			//0-6的选择，指定弹出图片动画类型，默认随机
			anim : 5

		});
	}
	$(function() {
		$("li>span").on('click',function(e){
            e.preventDefault();
            $(this).parent().addClass('active').siblings('.active').removeClass('active');
            $("#DINNING_BACK").val($(this).parent().attr("id"));
        });
	});
	</script>
</body>
</html>
